<template>
  <div id="check">
    <div class="head">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item>个人中心</el-breadcrumb-item>
        <el-breadcrumb-item>我的考勤</el-breadcrumb-item>
        <el-breadcrumb-item>考勤检查</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <el-calendar>
      <!-- 这里使用的是 2.5 slot 语法，对于新项目请使用 2.6 slot 语法-->
      <template slot="dateCell" slot-scope="{ data }">
        <p :class="data.isSelected ? 'is-selected' : ''">
          {{ data.day.split("-").slice(1).join("-") }}
          {{ data.isSelected ? "√" : "" }}
          <!-- {{!time.indexOf(data.day)?'考勤':''}} -->
          <!-- {{f2(data)}}  -->
          <!-- <span v-for="(v, i) in time2" :key="i">{{
            v == data.day.split("-").slice(2).join("-") ? spa[0] : spa[1]
          }}</span> -->
          <span v-for="(v, i) in time" :key="i">{{
            !v.indexOf(data.day) ? spa[2] : spa[1]
          }}</span>

          <!-- {{ data.day.split("-").slice(2).join("-") }} -->
        </p>
      </template>
    </el-calendar>

    <div id="tab">
      <div id="tab_head">本月考勤汇总情况</div>
      <el-table stripe :data="tableData" style="width: 100%">
        <el-table-column prop="jb" label="加班" width="180"> </el-table-column>
        <el-table-column prop="cd" label="迟到" width="180"> </el-table-column>
        <el-table-column prop="kg" label="旷工"> </el-table-column>
        <el-table-column prop="sj" label="事假"> </el-table-column>
        <el-table-column prop="bj" label="病假"> </el-table-column>
      </el-table>
    </div>
  </div>
</template>
<style lang="less">
.head {
  margin-bottom: 20px;
}
.is-selected {
  color: #1989fa;
}
.el-calendar-table .el-calendar-day {
  height: 70px !important;
}
#tab_head {
  background-color: #1989fa;
  width: 100%;
  height: 50px;
  color: white;
  line-height: 50px;
  // margin: 12px 20px 35px;
  padding: 0 10px;
}
#tab {
  background-color: white;
  padding: 0 20px;
}
</style>
<script>
export default {
  data() {
    return {
      // value: new Date(),
      // time: ['2019-03-04', "2019-03-24"],
      isvalue: 1,
      time: [],
      time2: [],
      c: "考勤",
      isshow: false,
      spa: ["正常", "", ""],
      mydata: [],
      mydata2: [],
    };
  },
  methods: {
    f1(a) {
      let val = [];
      console.log(a);
      // return  !a.indexOf('2022-03-02')?'考勤':''
      this.time.forEach((item, index) => {
        // val=item
        //  return !a.indexOf(item)?'考勤':''
        if (a.indexOf(item)) {
          val.push(item);
          console.log(item);
        }
      });
      console.log(val);
      // return !a.indexOf(val)?'考勤':''
      return val;
    },
    f2(b) {
      console.log(b);
      this.time.forEach((item, index) => {
        if (b.indexOf(item)) {
          this.isshow = true;
        }
      });
    },
    getdata() {
      this.$axios({
        url: "/meetmanagement/kq",
      }).then((res) => {
        this.mydata2 = res.data.data;
        console.log(this.mydata2);
      });
    },
    quer() {
      this.time2 = [];
      for (let j = 0; j < this.mydata2.length; j++) {
        if (
          this.mydata2[j].apply_name ==
          JSON.parse(sessionStorage.getItem("user")).work_id
        ) {
          this.spa[2] = this.mydata2[j].type;

          this.time.push(this.mydata2[j].applytime);
          console.log(this.time);
        }
      }
      let date = new Date();
      // console.log(date.getMonth() + 1);
      // console.log(date.getDate());
      let old;
      console.log(this.time);
      for (let m = 0; m < this.time.length; m++) {
        old = new Date(this.time[m]);
        for (let k = 1; k < date.getDate(); k++) {
          if (old.getDate() != k) {
            this.time2.push(k);
          }
        }
        console.log(this.time2);
      }
    },
    ysdata() {
      this.$axios({
        url: "/Atten/Atten_Approval_render",
      }).then((res) => {
        this.mydata = res.data;
        // console.log(this.mydata);
      });
    },
  },

  created() {
    this.ysdata();
    this.getdata();
    this.quer();
  },
  computed: {
    tableData: function () {
      let arr = [{ sj: 0, bj: 0, jb: 0, cd: 0, kg: 0 }];
      for (let i = 0; i < this.mydata.length; i++) {
        if (this.mydata[i].type == "事假") {
          arr[0].sj = arr[0].sj + 1;
        } else if (this.mydata[i].type == "病假") {
          arr[0].bj = arr[0].bj + 1;
        } else if (this.mydata[i].type == "加班") {
          arr[0].jb = arr[0].jb + 1;
        } else if (this.mydata[i].type == "迟到") {
          arr[0].cd = arr[0].cd + 1;
        } else if (this.mydata[i].type == "旷工") {
          arr[0].kg = arr[0].kg + 1;
        }
      }
      return arr;
    },
  },
  watch: {
    mydata2: function () {
      this.quer();
    },
  },
  mounted() {
    // console.log(this);
  },
};
</script>
